<template>
	<view class="">
		<Header title="我的" :isHome="false" :isWhite='true'></Header>
		<view class="">
			<view class="topInfo">
				<view class="flex">
					<image src="/static/avator.png" v-if="!userInfo.avatar" mode="" class="avator"></image>
					<image @click="handleLook(img_url+userInfo.avatar)" :src="img_url+userInfo.avatar" v-else mode="" class="avator">
					</image>
					<view class="info" v-if="userInfo">
						<view class="info-name">
							<span class="" v-if="userInfo.adultname">
								{{userInfo.adultname}}
							</span>
							<span v-if="userInfo.mobile">{{userInfo.mobile}}</span>
						</view>
						<view class="info-info">
							<image src="/static/yonghu.png" mode="" class="yonghu"></image>
							<span v-if="userInfo.childrenname">{{userInfo.childrenname}}/</span>
							<span v-else>学生/</span>
							<span v-if="userInfo.school">{{userInfo.school}}/</span>
							<span v-else>学校/</span>
							<span v-if="userInfo.grade">{{userInfo.grade}}</span>
							<span v-else>年级</span>
						</view>
					</view>
					<view class="info" v-else>
						<view class="info-name" @click="goLogin()">
							登录/注册
						</view>
					</view>
				</view>
				<view class="flex set" @click="goPage('/subpages/banner/set')">
					<image src="/static/set.png" mode=""></image>
					<view class="">
						设置
					</view>
				</view>
			</view>
			<view class="buyhuiyuan">
				<view class="buyhuiyuan-con">
					<view class="">
						<image src="/static/huiyuan.png" mode="" class="huiyuan"></image>
						<view class="buyhuiyuan-buy">
							购买年会会员
						</view>
					</view>
					<view class="buyBtn" @click="goPage('/subpages/banner/buyRightnow')">
						<view class="" v-if="userInfo.level==0">
							立即购买
						</view>
						<view class="" v-else>
							续费
						</view>
						<image src="/static/rightb.png" mode="" class="rightb"></image>
					</view>
				</view>
			</view>
			<view class="balance">
				<view class="">
					<view class="balanceTtitle">
						我的余额(元)
					</view>
					<view class="balanceMoney">
						{{money}}
					</view>
				</view>
				<view class="withdraw" @click="goPage('/subpages/banner/withdraw')">
					<view>余额提现</view>
					<image src="/static/rightw.png" mode="" class="rightb"></image>
				</view>
			</view>
			<view class="myStudy">
				<view class="myStudy-top">
					<view class="myStudy-left">
						<view class="border">

						</view>
						<view class="">
							我的学习
						</view>
					</view>
					<view class="myStudy-more" @click="goPage('/subpages/banner/myStudy?subText='+activeIndex)">
						<view class="">
							更多
						</view>
						<image src="/static/toright.png" mode="" class="toright"></image>
					</view>
				</view>
				<view class="discipline">
					<view class="discipline-detail" :class="{ 'discipline-detail-active': activeIndex === item.name }"
						v-for="(item,index) in discipline" :key="index" @click="changeTab(item.name)">
						{{item.name}}
					</view>
				</view>

				<view class="training" v-for="(item,index) in aslist" :key="index">
					<view class="training-top">
						<view class="training-left">
							<view class="training-leftTitle">
								{{item.paper_title}}
							</view>
							<view class="training-leftTime">
								<span>创建时间：</span>
								<span>{{ formatDate(item.createtime) }}</span>
							</view>
						</view>
						<view class="detail" @click="checkDetail(item)">
							详情
						</view>
					</view>
					<view class="">
						<view class="totalNum">
							<view class="total">
								<view class="totalNumTitle">
									答对
								</view>
								<view class="totalNumCon">
									{{item.correct_num}}题
								</view>
							</view>
							<view class="line">

							</view>
							<view class="total">
								<view class="totalNumTitle">
									答错
								</view>
								<view class="totalNumCon" style="color: #F54040;">
									{{item.error_num}}题
								</view>
							</view>
							<view class="line">

							</view>
							<view class="total">
								<view class="totalNumTitle">
									总分
								</view>
								<view class="totalNumCon">
									{{item.total_score}}分
								</view>
							</view>
							<view class="line">

							</view>
							<view class="total">
								<view class="totalNumTitle">
									得分
								</view>
								<view class="totalNumCon" style="color: #F54040;">
									{{item.obtain_score}}分
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="commonuse">
				<view class="myStudy-left">
					<view class="border">

					</view>
					<view class="">
						常用列表
					</view>
				</view>
				<view class="logo">
					<view class="" v-for="(item,index) in logoList" :key="index" @click="goPage(item.url)">
						<image :src="item.icon" mode="" class="icon"></image>
						<view class="name">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		get,
		post,
		img_url
	} from '../../utils/request';
	export default {
		data() {
			return {
				img_url:img_url,
				userInfo: '',
				name: '李青春',
				mobile: '13888888888',
				relationship: '李儿子',
				school: '学校名称',
				grade: '三年级',
				activeIndex: '语文',
				status: 1, //不是会员
				money: '', //余额
				discipline: [{
						name: '语文',
					},
					{
						name: '数学',
					},
					{
						name: '英语',
					}
				],
				aslist: [],
				logoList: [{
						icon: '/static/mingxi.png',
						name: '余额明细',
						url: '/subpages/zxy/balance-details'
					},
					{
						icon: '/static/tuiguang.png',
						name: '我的推广',
						url: '/subpages/zxy/marketing'
					},
					{
						icon: '/static/kefu.png',
						name: '联系客服',
						url: '/subpages/banner/kefu'
					}
				]
			}
		},
		onLoad() {
			// this.getUserInfo()
			// this.getMoney()
			// this.getAslist()
		},
		onShow() {
			this.getUserInfo()
			this.getMoney()
			this.getAslist()
		},
		methods: {
			getUserInfo() {
				get('/user/user_info')
					.then(res => {
						if (res.code == 1) {
							this.userInfo = res.data
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			// 获取可提现金额
			getMoney() {
				get('/user/get_withdrawable')
					.then(res => {
						if (res.code == 1) {
							this.money = res.data
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			// 我的学习
			getAslist() {
				get('/answer_statistics/user_aslist?sub_text=' + this.activeIndex)
					.then(res => {
						if (res.code == 1) {
							// this.aslist = res.data
							// 展示数组的前三个元素
							this.aslist = res.data.slice(0, 3);
						}
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			changeTab(index) {
				console.log(index);
				this.activeIndex = index
				this.getAslist()
			},
			checkDetail(item) {
				if (item.module_id == 1) {
					uni.navigateTo({
						url: '/subpages/banner/practiceResult?id=' + item.id + '&paperId=' + item.paper_id
					})
				} else if (item.module_id == 4) {
					uni.navigateTo({
						url: '/subpages/banner/testResult?id=' + item.id + '&paperId=' + item.paper_id
					})
				}
			},
			goPage(url) {
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.showToast({
						title:'请登录后操作！',
						icon:'none'
					})
					setTimeout(function(){
						uni.redirectTo({
							url: '/subpages/login/login'
						})
					},1000)
					return
				}
				uni.navigateTo({
					url: url
				})
			},
			goLogin(){
				uni.redirectTo({
					url:'/subpages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.logo {
		display: flex;
		align-items: center;
		width: 70%;
		margin: 24rpx;
		justify-content: space-between;

		view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;


			image {
				width: 72rpx;
				height: 72rpx;
			}
		}

		.name {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 24rpx;
			color: #222222;
			margin-top: 10rpx;
		}
	}

	.totalNum {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 50rpx;
		background-color: #fff;
		position: sticky;
		margin: 28rpx 0;

		.total {
			text-align: center;
		}

		.line {
			width: 1rpx;
			height: 60rpx;
			background-color: #f5f5f5;
		}

		.totalNumTitle {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 22rpx;
			color: #999999;
		}

		.totalNumCon {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 26rpx;
			color: #222222;
			margin-top: 5rpx;
		}
	}

	.training {
		width: 630rpx;
		background: #F0F0F0;
		border: 3rpx solid #DDDDDD;
		border-radius: 12rpx;
		box-sizing: border-box;
		padding: 28rpx;
		margin: 20rpx 0;

		.training-top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.training-leftTitle {
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 32rpx;
				color: #222222;
			}

			.training-leftTime {
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin: 20rpx 0;
			}

			.detail {
				width: 120rpx;
				height: 48rpx;
				border: 2rpx solid #1A1A1A;
				border-radius: 6rpx;
				text-align: center;
				line-height: 48rpx;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 22rpx;
				color: #222222;
			}
		}
	}

	.discipline {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 362rpx;
		height: 64rpx;
		border: 3rpx solid #1A1A1A;
		border-radius: 12rpx;
		margin: 20rpx 0;
	}

	.discipline-detail {
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 26rpx;
		color: #222222;
		width: 110rpx;
		height: 48rpx;
		text-align: center;
		line-height: 48rpx;
	}

	.discipline-detail-active {
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 26rpx;
		color: #fff;
		background: url(/static/active-bg.png) no-repeat center center / cover;
	}

	.topInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 0 0 40rpx;

		.flex {
			display: flex;
			align-items: center;
		}

		.info-name {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 32rpx;
			color: #222222;
		}

		.avator {
			width: 120rpx;
			height: 120rpx;
			margin-right: 24rpx;
			border-radius: 50%;
		}

		.info-info {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 20rpx;
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.yonghu {
				width: 18.75rpx;
				height: 20rpx;
				display: block;
				margin-right: 10rpx;
			}
		}

		.set {
			display: flex;
			align-items: center;
			width: 160rpx;
			height: 56rpx;
			line-height: 56rpx;
			background: #EBEBEB;
			border-radius: 28rpx 0 0 28rpx;
			padding: 16rpx 24rpx;
			box-sizing: border-box;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 32rpx;
			color: #1A1A1A;

			image {
				width: 32rpx;
				height: 30.44rpx;
				display: block;
				margin-right: 10rpx;

			}
		}
	}

	.buyhuiyuan {
		height: 210rpx;
		box-sizing: border-box;
		padding: 50rpx;
		background: url(/static/mybg.png) no-repeat center center/cover;
		position: relative;
		margin-top: 30rpx;

		.buyhuiyuan-con {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			top: 20rpx;
			left: 56rpx;

			.buyhuiyuan-buy {
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFDE99;
				margin-left: 20rpx;
			}

			.buyBtn {
				width: 156rpx;
				height: 56rpx;
				line-height: 56rpx;
				background: #FFD275;
				border-radius: 28rpx;
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 26rpx;
				color: #1A1A1A;
				padding: 0 15rpx;
				box-sizing: border-box;
				margin-left: 180rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				view {
					margin-right: 10rpx;
				}
			}
		}

		view {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.huiyuan {
			width: 80rpx;
			height: 80rpx;
			display: block;
		}


	}

	.rightb {
		width: 12rpx;
		height: 16rpx;
		display: block;
	}

	.balance {
		width: 686rpx;
		height: 178rpx;
		background-image: linear-gradient(90deg, #FFD275 0%, #FDCD36 100%);
		border-radius: 24rpx;
		margin: 20rpx auto;
		padding: 40rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.balanceTtitle {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 24rpx;
			color: #1A1A1A;
		}

		.balanceMoney {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 40rpx;
			color: #1A1A1A;
			margin-top: 10rpx;
		}

		.withdraw {
			width: 156rpx;
			height: 56rpx;
			background: #1A1A1A;
			border-radius: 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 26rpx;
			color: #FFFFFF;
			padding: 0 15rpx;
			box-sizing: border-box;
		}
	}

	.myStudy {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 40rpx auto;
		padding: 32rpx 28rpx;
		box-sizing: border-box;

		.myStudy-top {
			display: flex;
			justify-content: space-between;



			.toright {
				width: 24rpx;
				height: 24rpx;
			}

			view {
				display: flex;
				align-items: center;
				color: #222222;
			}



			.myStudy-more {
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 24rpx;
			}
		}

	}

	.myStudy-left {
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 32rpx;
		display: flex;
		align-items: center;

		.border {
			width: 8rpx;
			height: 32rpx;
			background: #FFD275;
			border-radius: 4rpx;
			margin-right: 12rpx;
		}
	}

	.commonuse {
		padding: 28rpx;
	}
</style>